<template>
  <div class="content-view">
    <div class="table-head-tool">
      <Button type="primary" @click="showAddWarp">新增</Button>

      <Form ref="formInline" :model="gridOption.param.seachOption" inline :label-width="80">
        <FormItem :label-width="20" class="flex">
          <Select v-model="gridOption.param.seachOption.key" style="width: 120px" :placeholder="seachTypePlaceholder">
            <Option v-for="item in seachTypes" :value="item.key" :key="item.key">{{ item.value }}</Option>
          </Select>
          <Input class="ml10" v-model="gridOption.param.seachOption.value" style="width: 200px" search placeholder="请输入关键字" @on-search="query(1)" />
        </FormItem>

        <FormItem>
          <Button type="default" @click="exportCsv">导出</Button>
        </FormItem>
      </Form>
    </div>
    <div class="table-body">
      <tables :columns="listColumns" :value="gridOption.data" :pageOption="gridOption.param.pageOption" @changePage="query"></tables>
    </div>
    <editModal ref="editModal" :columns="editColumns" :rules="gridOption.rules"> </editModal>
  </div>
</template>
<script>
  import funTool from '@/libs/funTool'
  import uiTool from '@/libs/uiTool'
  import modelServer from '@/api/system_high/modelServer.js'
  import infoServer from '@/api/cote/info_server.js'

  export default {
    data() {
      let rules = {}
      
      rules["title"]=[{ required: true, message: '请填写标题'}]; 
      rules["contents"]=[{ required: true, message: '请填写内容'}]; 
      
      rules["info_type_id"]=[{ required: true, message: '请选择栏目id', trigger: 'change', }] 
      rules["sort"]=[{ required: true,type:"number", message: '请选择排序', trigger: 'change' }]; 
      rules["release_date"]=[{ required: true, message: '请填写发布时间'}]; 
      return {
        seachTypes:[
            {key:"title",value:"标题"}, {key:"contents",value:"内容"}, {key:"info_type_id",value:"栏目id"}, {key:"sort",value:"排序"}, {key:"release_date",value:"发布时间"},
        ],
        gridOption: {
          param: {
            seachOption:{key:"",value:""},
            pageOption:{
              total: 0,
              page: 1,
              pageSize: 20
             }
          },
          rules,
          columns:[
            {key:'id',title:'id',width:'80px',is_show_edit:0},
            
            { key: "title",title:"标题",disabled:  false,is_show_edit:1,is_show_list:1,  com:"Input" },
            { key: "contents",title:"内容",disabled:  false,is_show_edit:1,is_show_list:0,  com:"Editor" },
            { key: "info_type_id",title:"栏目id",
            com:"Select",
            source:[] ,render:(h,params)=>{
                let row=params.column.source.find(p=>(p.key)==params.row['info_type_id'] )
                if(row){ return <span>{row.value}</span>}else { return <span>-</span> }
              },
            disabled:  false,
            is_show_edit:1,
            is_show_list:1,
            defaultVal:'',
            },
           
            { key: "sort",title:"排序",disabled:  false,is_show_edit:1,is_show_list:1, data_type:"number", com:"InputNumber" },
            { key: "release_date",title:"发布时间",disabled:  false,is_show_edit:1,is_show_list:1,  com:"DatePicker" },
           {key:'created_date',title:'创建时间',width:'100px',is_show_edit:0 },
           {key:'updated_date',title:'更新时间',width:'100px',is_show_edit:0 },
           {
              title: '操作',
              key: 'action',
              width:'200px',
              type: 'template',
              render: (h, params) => {
                let btns = [
                  {
                    title: '修改',
                    type: 'primary',
                    click: () => {
                      this.showEditWarp(params.row)
                    },
                  },
                  {
                    title: '删除',
                    type: 'primary',
                    click: () => {
                      this.delConfirm(params.row)
                    },
                  },
                ]

                return uiTool.getBtn(h, btns)
              },
            },],
          data: []
        },
      }
    },
    computed:{
      seachTypePlaceholder(){
        return  this.seachTypes.map(p=>p.value).slice(0,3).join('/')
      },
      editColumns(){
         let editTempColumns=  this.gridOption.columns.filter(p=>p.is_show_edit===1)
         return editTempColumns
      },
      listColumns(){
         let listTempColumns=  this.gridOption.columns.filter(p=>p.is_show_list!==0)
         return listTempColumns
      }
    },

    mounted() {
      this.init()
      this.initCol()
    },
    methods: {
      init() {
        this.query(1)
      },
     async initCol(){
       
          let columnRows=[    {key:'info_type_id',modelKey:"inf_info_type",map_option:{key:"id",value:"name"}},  ]
          let columnKeys=columnRows.map(p=>p.key)
          let newColumns=this.gridOption.columns.filter(p=>columnKeys.indexOf(p.key) >-1)
            for(let i=0;i<newColumns.length;i++){
              let curColumn =newColumns[i]
              let modelMap=columnRows[i].map_option
              let res=await modelServer.interface({model_key:columnRows[i].modelKey,map_option:modelMap})
              curColumn.source=res.data
            }
       
      },

       async inquiry() {
        let res = await infoServer.all(this.gridOption.param)
        this.gridOption.data = res.data
      },

      async query(page){
        if (page) {
          this.gridOption.param.pageOption.page = page
        }

        let res = await infoServer.page(this.gridOption.param)
         this.gridOption.data = res.data.rows
        this.gridOption.param.pageOption.total = res.data.count

      },
      async showAddWarp() {
        this.$refs.editModal.addShow({ }, async (newRow) => {
          let res = await infoServer.add(newRow)
          rootVue.$Message.success('新增成功！')
          this.init()
        })
      },
     async showEditWarp(row) {
        this.$refs.editModal.editShow(row, async (newRow) => {
          let valid = await this.$refs['editModal'].$refs['From'].validate()
          if (valid) {
            let res = await infoServer.edit(newRow)
            rootVue.$Message.success('修改成功！')
            this.init()
          }
        })
      },

     async delConfirm(row){
        uiTool.delConfirm(async () => {
                await infoServer.del(row)
                rootVue.$Message.success('删除成功！')
                this.init()
        })
      },

     async exportCsv(row){
        await infoServer.exportCsv(row)
      }
    },
  }
</script>

<style lang="less"></style>
